<template>
    <div class="register-container">
        <div class="register-card">
            <div class="register-header">
                <h1>注册账号</h1>
            </div>
            <div class="register-form">
                <div v-if="userStore.error" class="form-error-message">{{ userStore.error }}</div>

                <div class="form-item">
                    <label>用户名</label>
                    <input
                        v-model="registerForm.username"
                        :disabled="userStore.loading"
                        placeholder="创建您的游戏用户名"
                        type="text"
                    />
                </div>
                <div class="form-item">
                    <label>邮箱</label>
                    <input
                        v-model="registerForm.email"
                        :disabled="userStore.loading"
                        placeholder="请输入有效的邮箱地址"
                        type="email"
                    />
                </div>
                <div class="form-item">
                    <label>密码</label>
                    <input
                        v-model="registerForm.password"
                        :disabled="userStore.loading"
                        placeholder="设置您的密码（至少8位，包含字母和数字）"
                        type="password"
                    />
                </div>
                <div class="form-item">
                    <label>确认密码</label>
                    <input
                        v-model="registerForm.confirmPassword"
                        :disabled="userStore.loading"
                        placeholder="再次输入密码确认"
                        type="password"
                    />
                </div>
                <div class="form-checkbox">
                    <input
                        id="agree-terms"
                        v-model="agreeTerms"
                        :disabled="userStore.loading"
                        type="checkbox"
                    />
                    <label for="agree-terms"
                        >我已阅读并同意<a href="#" @click.prevent="openTerms">用户协议</a>和<a
                            href="#"
                            @click.prevent="openPrivacy"
                            >隐私政策</a
                        ></label
                    >
                </div>
                <div class="form-actions">
                    <button
                        :disabled="userStore.loading"
                        class="register-btn"
                        @click="handleRegister"
                    >
                        {{ userStore.loading ? '注册中...' : '注 册' }}
                    </button>
                    <button :disabled="userStore.loading" class="login-btn" @click="goToLogin">
                        返回登录
                    </button>
                </div>
            </div>
        </div>

        <!-- 用户协议弹窗 -->
        <el-dialog
            v-model="showTermsDialog"
            :close-on-click-modal="true"
            :show-close="true"
            class="custom-dialog"
            title="用户协议"
            width="60%"
        >
            <div class="dialog-content" v-html="termsContent"></div>
            <template #footer>
                <div class="dialog-footer">
                    <button class="dialog-btn" @click="showTermsDialog = false">
                        我已阅读并理解
                    </button>
                </div>
            </template>
        </el-dialog>

        <!-- 隐私政策弹窗 -->
        <el-dialog
            v-model="showPrivacyDialog"
            :close-on-click-modal="true"
            :show-close="true"
            class="custom-dialog"
            title="隐私政策"
            width="60%"
        >
            <div class="dialog-content" v-html="privacyContent"></div>
            <template #footer>
                <div class="dialog-footer">
                    <button class="dialog-btn" @click="showPrivacyDialog = false">
                        我已阅读并理解
                    </button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { ElDialog, ElMessage } from 'element-plus'
    import { useUserStore } from '@/stores/user'

    const router = useRouter()
    const userStore = useUserStore()

    const registerForm = reactive({
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
    })

    const agreeTerms = ref(false)

    // 弹窗控制变量
    const showTermsDialog = ref(false)
    const showPrivacyDialog = ref(false)

    // 用户协议内容
    const termsContent = `
	<h2>用户协议</h2>
	<p>欢迎使用我们的游戏服务！本协议是您与游戏服务提供商之间的法律协议，请您务必审慎阅读、充分理解各条款内容。</p>

	<h3>1. 服务条款</h3>
	<p>1.1 本服务条款构成您与游戏服务提供商之间就游戏服务相关事项的全部约定。</p>
	<p>1.2 您理解并同意，游戏服务提供商有权随时修改本协议的任何条款，一旦本协议内容发生变动，将会在相关页面上提示修改内容。</p>

	<h3>2. 账号注册与使用</h3>
	<p>2.1 您承诺以真实、准确、完整的信息进行注册。</p>
	<p>2.2 您应妥善保管账号及密码信息，对使用该账号及密码进行的一切操作负完全责任。</p>
	<p>2.3 未经游戏服务提供商书面同意，禁止转让、赠与、借用、售卖或以其他方式处分账号。</p>

	<h3>3. 用户行为规范</h3>
	<p>3.1 遵守中华人民共和国相关法律法规。</p>
	<p>3.2 遵守游戏内的各项规则，不进行任何破坏游戏平衡、扰乱游戏秩序的行为。</p>
	<p>3.3 尊重知识产权，不得侵犯游戏服务提供商或第三方的知识产权。</p>

	<h3>4. 服务变更、中断或终止</h3>
	<p>4.1 游戏服务提供商保留随时变更、中断或终止部分或全部服务的权利。</p>
	<p>4.2 您理解并同意，游戏服务提供商有权基于游戏运营需要，暂停、更新游戏服务或调整游戏功能。</p>
	`

    // 隐私政策内容
    const privacyContent = `
	<h2>隐私政策</h2>
	<p>我们非常重视您的个人信息和隐私保护。本隐私政策旨在向您说明我们如何收集、使用、存储和共享您的个人信息，以及您享有的相关权利。</p>

	<h3>1. 信息收集</h3>
	<p>1.1 注册信息：当您注册账号时，我们会收集您提供的用户名、电子邮件地址等信息。</p>
	<p>1.2 游戏数据：我们会收集您在游戏中的操作记录、游戏进度、成就等信息。</p>
	<p>1.3 设备信息：我们可能会收集您使用的设备型号、操作系统、唯一设备标识符、IP地址等信息。</p>

	<h3>2. 信息使用</h3>
	<p>2.1 提供服务：我们使用收集的信息来提供、维护和改进游戏服务。</p>
	<p>2.2 安全保障：为保障您的账号安全，我们可能使用您的信息进行身份验证和风险评估。</p>
	<p>2.3 体验优化：基于您的使用习惯和偏好，优化游戏体验并提供个性化内容。</p>

	<h3>3. 信息共享</h3>
	<p>3.1 除非获得您的明确同意，我们不会与任何无关第三方共享您的个人信息。</p>
	<p>3.2 在法律要求或保护我们权利的情况下，我们可能会披露您的信息。</p>

	<h3>4. 信息安全</h3>
	<p>4.1 我们采取合理的安全措施保护您的个人信息不被未授权访问、使用或泄露。</p>
	<p>4.2 尽管如此，互联网并非绝对安全的环境，我们无法保证您的信息在传输过程中的安全性。</p>

	<h3>5. 您的权利</h3>
	<p>5.1 您有权访问、更正您的个人信息，以及在某些情况下要求删除您的数据。</p>
	<p>5.2 如需行使上述权利，请通过游戏内的客服系统联系我们。</p>
	`

    // 使用userStore的注册处理函数
    const handleRegister = async () => {
        // 表单验证
        if (
            !registerForm.username ||
            !registerForm.password ||
            !registerForm.confirmPassword ||
            !registerForm.email
        ) {
            ElMessage.warning('请填写所有必填信息')
            return
        }

        if (registerForm.password !== registerForm.confirmPassword) {
            ElMessage.error('两次输入的密码不一致')
            return
        }

        if (!agreeTerms.value) {
            ElMessage.warning('请阅读并同意用户协议')
            return
        }

        // 验证用户名格式
        if (registerForm.username.length > 100) {
            ElMessage.error('用户名长度不能超过100字符')
            return
        }

        if (/^\d+$/.test(registerForm.username)) {
            ElMessage.error('用户名不能为纯数字')
            return
        }

        // 验证密码复杂度
        if (registerForm.password.length < 8) {
            ElMessage.error('密码长度至少8位')
            return
        }

        if (!/(?=.*[A-Za-z])(?=.*\d)/.test(registerForm.password)) {
            ElMessage.error('密码需包含字母和数字')
            return
        }

        // 简单的邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        if (!emailRegex.test(registerForm.email)) {
            ElMessage.error('请输入有效的邮箱地址')
            return
        }

        // 使用Pinia store的注册方法
        const userData = {
            username: registerForm.username.trim(),
            password: registerForm.password,
            confirmPassword: registerForm.confirmPassword,
            email: registerForm.email.trim(),
        }

        const success = await userStore.registerUser(userData)

        if (success) {
            ElMessage.success('注册成功，即将跳转到登录页面！')

            // 延迟跳转到登录页
            setTimeout(() => {
                router.push('/login')
            }, 1000)
        }
    }

    const goToLogin = () => {
        router.push('/login')
    }

    // 打开用户协议弹窗
    const openTerms = () => {
        showTermsDialog.value = true
    }

    // 打开隐私政策弹窗
    const openPrivacy = () => {
        showPrivacyDialog.value = true
    }
</script>

<style scoped>
    .register-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }

    .register-card {
        width: 450px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        border: 1px solid rgba(255, 215, 0, 0.3);
        color: #fff;
        animation: fadeIn 0.5s ease-in-out;
        transform: scale(1);
        transition: transform 0.3s ease;
    }

    .register-card:hover {
        transform: scale(1.02);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
    }

    .register-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .register-header h1 {
        font-size: 28px;
        color: #ffd700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        margin: 0;
        letter-spacing: 2px;
    }

    .form-error-message {
        background-color: rgba(255, 87, 87, 0.2);
        color: #ff5757;
        padding: 10px;
        border-radius: 6px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 14px;
        border: 1px solid rgba(255, 87, 87, 0.3);
    }

    .form-item {
        margin-bottom: 20px;
    }

    .form-item label {
        display: block;
        margin-bottom: 8px;
        font-size: 16px;
        color: #ffd700;
    }

    .form-item input {
        width: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 6px;
        padding: 12px 15px;
        color: #fff;
        font-size: 16px;
        transition: all 0.3s;
        box-sizing: border-box;
    }

    .form-item input:focus {
        outline: none;
        border-color: #ffd700;
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    }

    .form-item input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .form-checkbox {
        display: flex;
        align-items: center;
        margin: 20px 0;
    }

    .form-checkbox input {
        margin-right: 10px;
        width: 18px;
        height: 18px;
        accent-color: #ffd700;
    }

    .form-checkbox label {
        font-size: 14px;
        color: #ccc;
    }

    .form-checkbox a {
        color: #ffd700;
        text-decoration: none;
        transition: all 0.3s;
    }

    .form-checkbox a:hover {
        text-decoration: underline;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }

    .form-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .register-btn,
    .login-btn {
        flex: 1;
        padding: 12px 0;
        font-size: 16px;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s;
        border: none;
    }

    .register-btn {
        background-color: #ffd700;
        color: #000;
        margin-right: 10px;
    }

    .register-btn:hover {
        background-color: #ffc000;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
    }

    .login-btn {
        background-color: transparent;
        color: #ffd700;
        border: 1px solid #ffd700;
    }

    .login-btn:hover {
        background-color: rgba(255, 215, 0, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
    }

    button:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* 自定义弹窗样式 */

    .dialog-content {
        max-height: 400px;
        overflow-y: auto;
        padding-right: 10px;
        line-height: 1.6;
    }

    .dialog-content h2 {
        color: #ffd700;
        margin-top: 0;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }

    .dialog-content h3 {
        color: #e6c200;
        margin-top: 20px;
    }

    .dialog-content p {
        margin-bottom: 10px;
        color: #fff;
    }

    .dialog-footer {
        display: flex;
        justify-content: center;
    }

    .dialog-btn {
        background-color: #ffd700;
        color: #000;
        border: none;
        border-radius: 6px;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
    }

    .dialog-btn:hover {
        background-color: #ffc000;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
    }

    /* 滚动条样式 */
    .dialog-content::-webkit-scrollbar {
        width: 6px;
    }

    .dialog-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .dialog-content::-webkit-scrollbar-thumb {
        background: #ffd700;
        border-radius: 3px;
    }

    .dialog-content::-webkit-scrollbar-thumb:hover {
        background: #ffc000;
    }
</style>
